<template>
	<view class="">
<!-- 		<mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback" @up="upCallback"> -->
		<view class="flex justify-between align-center padding-lr-sm padding-tb">
			<view class="flex-sub text-center color_99A2B5">名称/代码</view>
			<view class="flex-sub text-center color_99A2B5">持股/可卖</view>
			<view class="flex-sub text-center color_99A2B5">盈亏/盈亏比</view>
			<view class="flex-sub text-center color_99A2B5">现价/成本</view>
		</view>
		<view class="cu-list menu-avatar">
			<view 
			class="cu-item" 
			:class="modalName=='move-box-'+ index?'move-cur':''" 
			v-for="(item, index) in order" 
			:key="index"
			@touchstart="ListTouchStart" 
			@touchmove="ListTouchMove" 
			@touchend="ListTouchEnd" 
			:data-target="'move-box-' + index"
			>
				<view class="flex justify-between align-center padding-lr-sm padding-tb flex-sub" @click="tonavigateTo('/pages/trading/sell?code='+item.scode)">
					<view class="flex-sub text-center">
						<view class="text-black text-lg">{{item.sname}}</view>
						<view class="text-sm color_6B728A margin-top-xs">{{item.scode}}</view>
					</view>
					<view class="flex-sub text-center">
						<view class="text-black text-lg">{{item.balance}}</view>
						<view class="text-sm color_6B728A margin-top-xs">{{item.availablenum}}</view>
					</view>
					<view class="flex-sub text-center">
						<view class="text-green text-lg" style="color: red;" v-if="item.profitAndLoss>=0">{{parseFloat(item.profitAndLoss).toFixed(2)}}</view>
						<view class="text-green text-lg" style="color: #3ca509;" v-if="item.profitAndLoss<0">{{parseFloat(item.profitAndLoss).toFixed(2)}}</view>
						<view class="text-sm text-green margin-top-xs" style="color: red;" v-if="item.profitAndLoss>=0">{{parseFloat(item.profitAndLoss *100  / (item.balance *  item.smoney)).toFixed(2)}}%</view>
						<view class="text-sm text-green margin-top-xs" style="color: #3ca509;" v-if="item.profitAndLoss<0">{{parseFloat(item.profitAndLoss * 100 / (item.balance *  item.smoney)).toFixed(2)}}%</view>
					</view>
					<view class="flex-sub text-center">
						<view class="text-black text-lg">{{item.data.P}}</view>
						<view class="text-sm color_6B728A margin-top-xs">{{item.smoney}}</view>
					</view>
				</view>
				<view class="move">
					<view class="bg-red" @click="tonavigateTo('/pages/trading/sell?code='+item.scode)">卖出</view>
				</view>
			</view>
		</view>
<!-- 		</mescroll-body> -->
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"; // 上下拉加载刷新
	export default {
		mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
		data() {
			return {
				modalName: null,
				listTouchDirection: null,
				listTouchStart: 0,
				
				// 调整
				order: [],
				// 是否自动加载
				downOption: {
					auto: false //是否在初始化后,自动执行downCallback; 默认true
				}
			}
		},
		methods: {
			// 滑动卖出效果 开始 
			// ListTouch触摸开始
			ListTouchStart(e) {
				this.listTouchStart = e.touches[0].pageX
			},
			
			// ListTouch计算方向
			ListTouchMove(e) {
				this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left'
			},
			// ListTouch计算滚动
			ListTouchEnd(e) {
				if (this.listTouchDirection == 'left') {
					this.modalName = e.currentTarget.dataset.target
				} else {
					this.modalName = null
				}
				this.listTouchDirection = null
			},
			// 滑动卖出效果  结束
			// 新代码
			// 跳转页面
			tonavigateTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			/*下拉刷新的回调 */
			downCallback() {
				this.$Request.post(this.$api.index.getOrders).then(res => {
					//联网成功的回调,隐藏下拉刷新的状态
					this.mescroll.endSuccess();
					this.order = res.data;
					//设置列表数据
					// this.order.unshift(res.data);
				}).catch(() => {
					//联网失败的回调,隐藏下拉刷新的状态
					this.mescroll.endErr();
				})
			
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback() {
				let _this = this
				//联网加载数据
				this.$Request.post(this.$api.index.getOrders).then(curPageData => {
					//方法三(推荐): 您有其他方式知道是否有下一页 hasNext
					_this.mescroll.endSuccess(curPageData.data.length, hasNext = false); //必传参数(当前页的数据个数, 是否有下一页true/false)
					//设置列表数据
					// _this.order = this.order.concat(curPageData.data);
					_this.order = curPageData.data;
				}).catch(() => {
					//联网失败, 结束加载
					_this.mescroll.endErr();
				})
			},
			getOrders: function() {
				this.$Request.post(this.$api.index.getOrders).then(res => {
					this.order = res.data;
				})
			}
		},
		created() {
			this.getOrders()
			let _self = this;
			this.timer = setInterval(function() {
				_self.getOrders();
			}, 10000);
		}
	}
</script>

<style lang="scss">
	.cu-list.menu-avatar>.cu-item{
		background-color: #FFFFFF;
	}
	.cu-list>.cu-item.move-cur{
		transform: translateX(-149rpx);
	}
	.cu-list>.cu-item .move{
		width: 149rpx;
	}
</style>
